<template>
	<view>
		<page-head headTitle="定制订单" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9 bg-white">
			<view class="flex fs-3 p-l-r3 color-c p-t3 p-t2 justify-between">
				<view class="flex">
					<view>
						<text>{{orderInfo.from_city}}</text>
						<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
						<text>{{orderInfo.to_city}}</text>
					</view>
					<view class="mr-6">
						<text>{{orderInfo.from_date}}</text>
						<text class="p-l2 p-r2 color-c">至</text>
						<text>{{orderInfo.to_date}}</text>
					</view>
				</view>
				<view class="color-sky-blue mr-6 fs-2">{{orderInfo.status_text}}</view>
			</view>
			<border></border>
			<view class="flex search-h align-center p-l-r3">
				<text class="contacts display-inline fs-3">人均预算</text>
				<view class="flex align-center fs-3">
					<text class="color-table">{{orderInfo.budget}}</text>
				</view>
			</view>
			<view class="flex search-h align-center p-l-r3">
				<text class="contacts display-inline fs-3 number">服务</text>
				<view class="service-options flex flex-wrap">
					<view class="m-r1 p-t1 personal-active" v-for="(item,index) in orderInfo.services"><text>{{item}}</text></view>
				</view>
			</view>
			<view class="flex p-l-r3 p-t-b3">
				<text class="contacts display-inline fs-3">其他需求</text>
				<view class="flex fs-3 flex-1">
					<text class="color-table">{{orderInfo.demands}}</text>
				</view>
			</view>
			<view class="flex search-h align-center p-l-r3">
				<text class="contacts display-inline fs-3 guide-letter">联系人</text>
				<view class="flex align-center fs-3">
					<text class="color-table">{{orderInfo.contact_name}}</text>
				</view>
			</view>
			<view class="flex search-h align-center p-l-r3 p-b1">
				<text class="contacts display-inline fs-3 number">手机</text>
				<view class="flex align-center fs-3">
					<text class="color-table">{{orderInfo.contact_mobile}}</text>
				</view>
			</view>
			<border></border>
			<view class="flex p-l-r3 p-t-b3">
				<text class="contacts display-inline fs-3">接单导游</text>
				<view class="flex align-center fs-3 justify-between flex-1">
					<text class="color-table">{{guideInfo.name}}</text>
					<image src="/static/images/see.png" class="custom-see">
				</view>
			</view>
			<view class="flex p-l-r3 p-t-b3">
				<text class="contacts display-inline fs-3">接单时间</text>
				<view class="flex align-center fs-3">
					<text class="color-table">{{guideInfo.received_at}}</text>
				</view>
			</view>
		</view>
		<view class="m-l-r m-b">
			<button type="submit" class="border-r bg-color fs-g button-border" @tap="cancel" v-show="orderInfo.can_cancel == 1">取消订单</button>
			<button type="submit" class="border-r bg-color fs-g button-border" @tap="cancel" v-show="orderInfo.can_comment == 1">评价</button>
		</view>
		<!-- 取消提示框 
		<view v-show="isShow">
			<view class="cancel-bj fixed fixed-top"></view>
			<view class="fixed cancel-content">
				<text class="flex justify-content align-center cancel-p fs-32 border-botton">是否取消订单？</text>
				<view class="flex fs-g">
					<text class="flex search-h align-center justify-content book-widht" @click="onCancel">否</text>
					<text class="flex search-h align-center justify-content book-widht cancel-res">确认取消</text>
				</view>
			</view>
		</view>
		-->
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import border from '@/components/common/border.vue'
import brightButton from '@/components/common/bright-button.vue'
	export default {
		components:{
			pageHead,
			border,
			brightButton
		},
		data() {
			return {
				isShow:false,
				orderInfo:{},
				guideInfo:{},
			}
		},
		onLoad(e) {
			this.orderSn = e.sn;
			this.getInfo()
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			licekSubmit(){
				this.isShow = true;
			},
			onCancel(){
				this.isShow = false;
			},
			getInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/user/customize',
					data:{
						sn:this.orderSn
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						this.orderInfo = res.data.data.order;
						this.guideInfo = res.data.data.guide;
					}
				});
			},
			//取消订单
			cancel(e){
				uni.showModal({  
				  title: '提示',  
				  content: '确定取消预约吗？',  
				  success: (res) => {  
					if (res.confirm) { 
						var orderSn = this.orderInfo.sn;
						this.$myRequest({
							method:'POST',
							url:'/api/customize/cancel',
							data:{
								sn:orderSn,
							},
						}).then(res=>{
							console.log(res);
						    if(res.data.code == 1){
								window.location.reload();
							}
						});
					}  
				  }  
				})
			},
		}
	}
</script>

<style scoped>
.contact-picture{width: 50rpx;height: 50rpx;}
.guide-news{width: 35rpx;height: 33rpx;}
.contacts{width: 170rpx;}
.guide-letter{letter-spacing: 18rpx;}
.number{letter-spacing: 48rpx;}
.user-pic{width: 60rpx;height: 60rpx;}
.all-pic{width: 25%;height: auto;}
.bg-bar{width: 8rpx;height: 31rpx;}
.personal-active text{width: 120rpx;height: 44rpx;display: inline-block; background-color: #fff5ee;border: 2rpx solid #ff802e;color: #ff802e;text-align: center;line-height: 1.5;}
.custom-see{width: 40rpx;height: 39rpx;}
.cancel-content{top: 30%;left: 60rpx;right: 60rpx;border-radius: 20rpx; background-color: #FFFFFF;z-index: 2;}
.book-widht{width: 49.5%;}
.cancel-p{padding: 90rpx 40rpx;box-sizing: border-box;}
.cancel-res{border-left: 2rpx solid #DDDDDD;color: #FF4949;}
</style>
